<template>
  <CommonPanel title="重点区域视频监控" :loading="loading">
    <!-- <div class="main-box"> -->
      <div class="box" style="width: 100%;height: 100%;color: #fff;" id="playWnd">
 
      <!-- <surveillance :data="data"></surveillance> -->
   
    </div>
  </CommonPanel>
</template>

<script setup>
import {
  onMounted,
  onUnmounted,
  reactive,
  ref,
  watch,
  onBeforeUnmount,
} from "vue";
import surveillance from "../components/surveillance.vue";
import clickLogin from "../../../utils/monitor";
import monitorOne from "../../../utils/monitorOne";
import { defineProps } from "vue";
import api from "@/api/people-board"
const props = defineProps({
  data: Object
});

const cameras = reactive([
      { id: 1, url: '192.168.2.64' },
      { id: 2, url: '192.168.2.64' },
      { id: 3, url: '192.168.2.64' },
      { id: 4, url: '192.168.2.64' },
      // 添加更多摄像头信息
    ]);

    // watch(() => props.data, (newData) => {
    //   if (newData) {
    //     monitorOne.init(newData)
    //   }
    // });

onMounted(async () => {
  await monitorOne.openDataHtml
   api.getMonitoringPoints().then(res=>{
    monitorOne.initPlugin().then(()=>{
    monitorOne.init(res?.data)
  })
  })
});

onBeforeUnmount(async () => {
  monitorOne.undataHtml()


});

</script>

<style lang="scss" scoped>
.main-box {
  display: flex;
  box-sizing: border-box;
  padding: 10px 6px;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-gap: 10px;

  & > div {
    border: 1px solid #e8ecf1;
  }

  .box-one {
    background-image: url("@/assets/jiankong.png");
    background-repeat: no-repeat;
    background-size: cover;
  }
}
</style>
